﻿@model PagedList.IPagedList<blogDemo.Models.artic>
@using PagedList
@using PagedList.Mvc

<!-- Start Blog Banner
    ==================================== -->
<div class="container">
    <div class="row">
        <div id="myCarousel" class="carousel slide" data-ride="carousel" style="box-shadow: 0px 0px 10px #666;">

            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>

            <div class="carousel-inner">
                <div class="item active">
                    <img alt="First slide" src="/Scripts/img/carousel/pic1.jpg">
                </div>
                <div class="item">
                    <img alt="Second slide" src="/Scripts/img/carousel/pic2.jpg">
                </div>
                <div class="item">
                    <img alt="Third slide" src="/Scripts/img/carousel/pic3.jpg">
                </div>
            </div>

            <a class="left carousel-control" data-slide="prev" role="button" href="#myCarousel">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" data-slide="next" role="button" href="#myCarousel">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        <div style="height:10px;"></div>
    </div>
</div>    

<section id="blog-page">
    <div class="container">
        <div class="row">

            <div id="blog-posts" class="col-md-8 col-sm-8">
                <div class="post-item">
                    @foreach (var item in Model)
                    { <!-- Single Post -->
                        <article class="entry wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms">

                            <div class="post-excerpt">
                                <h3> @Html.ActionLink(item.title, "Details", new { id = item.ID }) </h3>
                                <div>&emsp;&emsp;@(new MvcHtmlString(item.content))</div>
                                <p><a class="btn btn-transparent" href="/artic/Details/@item.ID">阅读全文 &raquo;</a></p>
                            </div>
                            <div class="post-meta">
                                <span class="post-date">
                                    <i class="fa fa-calendar"></i>@Html.DisplayFor(modelItem => item.date)
                                </span>
                                <span class="post-view">
                                    <i class="fa fa-eye"></i>@Html.DisplayFor(modelItem => item.views)
                                </span>
                                <span class="author">
                                    <i class="fa fa-user"></i><a href="#">@Html.DisplayFor(modelItem => item.author)</a>
                                </span>
                                <span class="post-tags">
                                    <i class="fa fa-tags"></i><a href="#">@Html.DisplayFor(modelItem => item.label)</a>
                                </span>
                            </div>
                        </article>
                        <!-- End Single Post --> }
                    <nav class="post-pagination wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms">
                        @Html.PagedListPager(Model, page => Url.Action("blog", new { page }))
                    </nav>
                </div>
            </div>

            <!-- Widget Section -->
            <div id="right-sidebar" class="col-md-4 col-sm-4">

                <!-- Single Widget -->
                <aside class="widget wow fadeInUp" data-wow-duration="1000ms">
                    <div class="widget-title">
                        <h3>查找</h3>
                    </div>
                    <div class="widget-content">
                        @using (Html.BeginForm("Search", "artic", FormMethod.Post, new { id = "search-form", role = "search" }))
                        {
                            @Html.AntiForgeryToken()
                            @Html.ValidationSummary(true)

                            <input type="text" class="form-control" placeholder="Search..." autocomplete="on" name="keyword">
                            <button type="submit" title="Search" id="search-submit">
                                <i class="fa fa-search"></i>
                            </button>
                        }
                    </div>
                </aside>
                <!-- End Single Widget -->
                <!-- Single Widget -->
                <aside class="widget wow fadeInDown">
                    <div class="widget-title">
                        <h3>关于</h3>
                    </div>
                    <div class="widget-content">
                        <p>&emsp;&emsp;该Blog应用由C#语言开发，开发环境为.Net 4.0。使用MVC设计模式， 数据层操作运用EntityFramework，视图引擎为Razor。前端框架套用bootstrap 响应式布局框架，方便PC端、移动端浏览。文章评论集成多说评论系统，方便管理和评论媒体化。后台管理提供简单的文章添加、删除、编辑等操作，编辑器为KindEditor富文本编辑器。实现简单的文章发布和展览。</p>
                    </div>
                </aside>
                <!-- End Single Widget -->
                <!-- Single Widget -->
                <aside class="widget wow fadeInDown">
                    <div class="widget-title">
                        <h3>标签</h3>
                    </div>
                    <div class="widget-content">
                        @foreach (var lbl in ViewBag.labels)
                        {
                            <a class="tag" href="/artic/Search/?keyword=@lbl">@lbl</a>
                        }
                    </div>
                </aside>
                <!-- End Single Widget -->
                <!-- Single Widget -->
                <aside class="widget wow fadeInUp">
                    <div class="widget-content">
                        <!-- tab nav -->
                        <ul class="tab-post-nav clearfix">
                            <li class="active"><a href="#recent" data-toggle="tab">最近文章</a></li>
                            <li><a href="#most-viewed" data-toggle="tab">阅读最多</a></li>
                        </ul>
                        <!-- /tab nav -->
                        <!-- tab content -->
                        <div class="tab-content">
                            <article class="tab-pane active tab-post" id="recent">
                                @foreach (var item in ViewBag.recent)
                                {
                                    <div class="clearfix">
                                        <div class="tab-excerpt">
                                            <h4> <a href="/artic/Detail/@item.ID">@item.title</a> </h4>
                                            <span>@item.date</span>
                                            <p>@(new MvcHtmlString(item.content)) </p>
                                        </div>
                                    </div>
                                }
                            </article>

                            <article class="tab-pane tab-post" id="most-viewed">
                                @foreach (var item in ViewBag.mostViewed)
                                {
                                    <div class="clearfix">
                                        <div class="tab-excerpt">
                                            <h4> <a href="/artic/Detail/@item.ID">@item.title</a> </h4>
                                            <span>@item.date</span>
                                            <p>@(new MvcHtmlString(item.content)) </p>
                                        </div>
                                    </div>
                                }
                            </article>

                        </div>
                        <!-- /tab content -->
                    </div>
                </aside>
                <!-- End Single Widget -->


            </div>
            <!-- End Widget Section -->

        </div>	    <!-- End row -->
    </div>       <!-- End container -->
</section>    <!-- End Section -->

